
<template>
  <div class="new">
    <header>
      <van-sticky>
        <van-nav-bar title="疫情资讯" />
      </van-sticky>
    </header>
    <div class="epdemicImg">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <img src="@/assets/hos1.jpeg" alt="" />
        </van-swipe-item>
        <van-swipe-item>
          <img src="@/assets/hos2.jpeg" alt="" />
        </van-swipe-item>
        <van-swipe-item>
          <img src="@/assets/hos3.jpeg" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="newWrap">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div class="HosWrap">
          <div
            class="HosBox"
            v-for="Hos in HosList"
            :key="Hos.id"
            @click="toHos(Hos)"
          >
            <div class="HosInf">
              <div class="HosImg">
                <div style="background-color: purple; height: 100%"></div>
              </div>
              <div class="detail">
                <div class="title">
                  {{ Hos.name }}
                </div>
                <div class="address">
                  医院地址：{{ Hos.province }}{{Hos.city}}{{Hos.area}}{{Hos.address}}
                </div>
                <div class="toDetails">点击查看路线></div>
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </div>
    <div style="height: 60px"></div>
  </div>
</template>

<script>
import { post, get } from "@/http/axios";
export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      obj: {
        page: 1,
        pageSize: 3,
      },
      HosTotal: 0,
      HosList: [],
      lat: 0,
      lng: 0,
    };
  },
  methods: {
    async getHos() {
      let res = await get("/hospital/pageQuery", this.obj);
      this.HosTotal = res.data.data.total;
      this.HosList = res.data.data.list;
      console.log(res);
    },
    onLoad() {
      setTimeout(() => {
        // 加载状态结束
        this.loading = false;
        // console.log(this.productData.total);
        //判断 页面数 是否大于数据总数
        if (this.obj.pageSize >= this.HosTotal) {
          this.finished = true;
        }
        // 异步更新数据
        // console.log('load');
        this.obj.pageSize += 8;
        // console.log(this.pageSize);
        this.getHos();
      }, 3000);
    },
    toHos(item) {
      this.$router.push({
        path: "location",
        query: {
          lat: item.latitude,
          lng: item.longitude,
        },
      });
    },
    //  //获取当前位置
    // getLocation() {
    //   navigator.geolocation.getCurrentPosition(
    //     (res) => {
    //       console.log(res)
    //       this.lat = res.coords.latitude;
    //       this.lng = res.coords.longitude;
    //       // console.log(this.lat,this.lng)
    //     },
    //     (err) => {
    //       console.log(err, "======");
    //     },
    //     { enableHighAccuracy: true, timeout: 5000, maximumAge: 0 }
    //   );
    // },
  },
  created() {
    this.getHos();
    // this.getLocation()
  },
};
</script>

<style  scoped>
.my-swipe .van-swipe-item {
  width: 100%;
  height: 200px;
}
.epdemicImg img {
  width: 100%;
  height: 210px;
}
.HosWrap {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.HosWrap .HosBox {
  border: 1px solid #bcbcbc;
  flex: 1 0 120px;
  border-radius: 5px;
  box-shadow: 5px 5px 10px #bcbcbc;
  margin: 5px 5px;
}
.HosInf {
  height: 100%;
  width: 100%;
  display: flex;
}
.HosInf .HosImg {
  padding: 10px;
  flex: 1;
  box-sizing: border-box;
}
.HosInf .detail {
  color: #c2c3c4;
  flex: 2;
  padding: 10px;
  font-size: 14px;
  position: relative;
}
.HosInf .detail .title {
  height: 20%;
  text-overflow: ellipsis;
  margin-bottom: 5px;
}
.HosInf .detail .toDetails {
  position: absolute;
  bottom: 10px;
  right: 5px;
}
</style>